<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>用户投注记录管理</title>
<%@include file="/WEB-INF/base.jspf"%>
<style>
.butt-xiangqing {
    color: #fff;
    background-color: #009688;
    border-color: #009688;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    
    
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

#test1 {
	height: 37px;
}
	.modal-dialog {
		max-width: 1000px;
	}
#test2 {
	margin: 2px;
	height: 37px;
}

#qblx {
	margin: 2px;
	width:90px;
	height: 37px;
}

#zflx {
	margin: 2px;
	height: 37px;
}
 
 #hymc {
	margin: 2px;
	height: 37px;
} 

#table_id_example_paginate{
 margin-right:100px;
}
.class-input-pageNumber{
    
	width:40px;
	height:23px;
	position: absolute;
	right:50px;
	top:12px;
}
.class-span-searchBtn{
	height:24px;
	width:36px;
	font-size:14px;
	text-algin:center;
	line-height:25px;
	padding:0!important;
	position: absolute;
	right:10px;
	top:12px;
}
.dataTables_length{
	margin-top:12px;
	margin-left:50px;
}
.tableSearch{
    position: relative;
}
.layui-inline-sy {
    height:37px;
}
.layui-inline {
	margin-top:15px;
}
.layui-inline-sy.layui-inline-sy-xiala{
    width:98px;
}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
.datePick {
	display:none;
}
.datePick.active {
	display:block;
}
.modal-body > p{
	display:flex;
	align-items:center;
	margin-right:16px;
	margin-bottom:16px;
}
.modal-body {
	display:flex;
	flex-wrap:wrap;
}
.modal-body > p > span {
	width:100px;
	margin-right: 10px;
	padding: 5px 0;
	text-align:center;
}
.modal-body > p > .form-control {
	width:250px;
	color: #000;
	font-size: 16px;
	font-weight: 500;
}

.backbet{
    color:red;
}

.backCor{
    color:red !important;	
}

</style>
</head>
<body class="layui-layout-body">
			<div class="layui-inline">
				<div class="layui-inline">
				<input class="layui-inline-sy" type="text" id="test1" name="date1" data-search placeholder="开始时间" value="" style="margin-bottom:2px;">
				<input class="layui-inline-sy" type="text" id="test2" name="date2" data-search placeholder="结束时间" value="" style="margin-bottom:2px;">
				<input class="layui-inline-sy" type="text" id="hymc-huiyuanzhanghao" name="huiyuanzh" data-search placeholder="用户账号">
					<button type="button" class="layui-btn layui-btn-radius" id="button-i-searchTableContent" style="margin-left:40px; margin-bottom:3px;">查询</button><br>
					<input class="layui-inline-sy" type="text" id="hymc-touzhuqihao" name="period" data-search placeholder="投注期号">
					<select class="layui-inline-sy layui-inline-sy-xiala" name="state" data-search id="qblx-quanbuleixing">
						<option value="">开奖状态</option>
						<option value="1">&nbsp;&nbsp;待开奖</option>
						<option value="3">&nbsp;&nbsp;已中奖</option>
						<option value="2">&nbsp;&nbsp;未中奖</option>
						<option value="7">&nbsp;&nbsp;已撤单</option>
						<option value="6">&nbsp;&nbsp;和局中奖</option>
					</select> 
					 <select data-search name="cname1" class="layui-inline-sy layui-inline-sy-xiala" id="qblx-quanbucaizhong">
						<option value="">全部彩种</option>
						<c:forEach items="${lottery}" var="lottery" varStatus="index">
						<option value="${lottery.cname }">&nbsp;&nbsp;${lottery.name }</option>
						</c:forEach>
					</select> 
					<button type="button" class="layui-btn layui-btn-radius" id="button-i-resetTableContent" style="margin-left:18px;">重置</button>
				</div>
			</div>
			<div>
				<table id="table_id_example" class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th style="display:none;"></th>
							<th>投注账号</th>
							<th>彩种名称</th>
							<th>投注期号</th>
							<th>投注时间</th>
							<th>投注注数</th>
							<th>投注金额</th>
							<th>中奖金额</th> 
							<th>订单状态</th> 
							<th>投注详情</th> 
							<th>订单操作</th>
						</tr>
					</thead>
					<tbody>
						  
					</tbody>
				</table>
			</div>
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   				
	<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:1000px!important;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
            	<p><span>投注账号:</span><input class="form-control" id="input-i-id" readonly /></p>
            	<p ><span>彩种名称：</span><input class="form-control input-c-canEdit" id="input-i-balance" readonly /></p>
            	<p ><span>投注期号：</span><input class="form-control" id="input-i-createtime" readonly /></p>
            	<p ><span>投注时间：</span><input class="form-control" id="input-i-dailimingchen" readonly /></p>
            	<p ><span>投注注数：</span><input class="form-control" id="input-i-icode" readonly /></p>
            	<p ><span>投注金额：</span><input class="form-control" id="input-i-lastIp" readonly /></p>
            	<p><span>中奖金额：</span><input class="form-control" id="input-i-lastTime" readonly /></p>
            	<p><span>订单状态：</span><input class="form-control input-c-canEdit" id="input-i-money" readonly /></p>
            	<p><span>投注玩法：</span><input class="form-control" id="input-i-name" readonly /></p>
            	<p><span>投注号码：</span><input class="form-control" id="input-i-nicheng" readonly /></p>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>	
	<script>
		 layui.use('laydate', function() {
			var laydate = layui.laydate;
			laydate.render({
				elem : '#test1',
			});
			 laydate.render({
					elem : '#test2' //指定元素
			}); 
		});
			function dataTable01(){
				$("#table_id_example").DataTable({
					"bProcessing" : false, // 是否显示取数据时的那个等待提示
					"bServerSide" : true,//这个用来指明是通过服务端来取数据
					 "bPaginate" : true, //是否显示分页 
					"sAjaxSource" : "/czgl/findUserBettingRecord.do",//这个是请求的地址
					"fnServerData" : retrieveData, // 获取数据的处理函数
					"destroy":true,
				      // "bPaginate": true,
				       "bLengthChange": true,      
				      "bSort": false,
				      // "bInfo": true,
				      "bAutoWidth": false,
//				         "bServerSide":true,
				      'aLengthMenu':[40,60, 80], 
				       "searching": false,  
				       "pagingType": "simple_numbers",
				       "dom": "t<'tableinfo'i<'tableSearch'p>l>",  
				       
				       "language": {//语言设置  
				            "lengthMenu": "每页显示 _MENU_ 条记录",     
				            "zeroRecords": "没有检索到数据",     
				            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
				            "info": "没有数据",     
				            "oPaginate": {     
				                "sFirst": "首页",     
				                "sPrevious": "前一页",     
				                "sNext": "后一页",     
				                "sLast": "尾页"    
				          	},
				            "search":"",
				            "searchPlaceholder": "请输入关键字",
				            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
				            "infoEmpty":      "没有找到匹配的信息",
				         },  
				         "columnDefs": [{"defaultContent": "",
                             "targets": "_all"}],
				        "aoColumns": [
				        	 {"data": "id", "className": "id-td-edit hidden-td"},
							 {"data": "huiyuanzh", "className": "yid-td"},
							 {"data": "cname1", "className": "yid-td1"},
		                     {"data": "period", "className": "sex-td"},
		                     {"data": "orderdate", "className": "njob-td timedate"},
		                     {"data": "lottercount", "className": "njob-td"},
		                     {"data": "acount", "className": "njob-td"},
		                     {"data": "goalmoney", "className": "njob-td"},
		                     {"data": "states", "className": "njob-td"},
		                     {"data": null, "defaultContent": "<button class='butt-xiangqing'>投注详情</button>"},
		                     {"data": null, "defaultContent": "<button class='btn btn-danger btn-c-delBankInfo'>删除</button>"},
		                 ], 
		                 
		                 /* 跳转到制定页 */
		                 "fnDrawCallback": function(){
		                	 $("#table_id_example_paginate").append("  到第 <input style='height:28px;line-height:28px;width:40px;' class='margin text-center' id='changePage' type='text'> 页  <a class='btn btn-default shiny' style='margin-bottom:5px' href='javascript:void(0);' id='dataTable-btn'>确认</a>");
								var oTable = $("#table_id_example").dataTable();
								$('#dataTable-btn').click(function(e) {
									if($("#changePage").val() && $("#changePage").val() > 0) {
										var redirectpage = $("#changePage").val() - 1;
									} else {
										var redirectpage = 0;
									}
									oTable.fnPageChange(redirectpage);
		                	 })
		                 }
				})
				function retrieveData(sSource, aoData, fnCallback) {
				$.ajax({
					url : sSource,//这个就是请求地址对应sAjaxSource
					data : {
						"pageCount":aoData[0].value,
						"startIndex":aoData[3].value,
						"lineCount":aoData[4].value,
						 "cname1":$("#qblx-quanbucaizhong").val(),
						 "period":$("#hymc-touzhuqihao").val(),
						 "date1":$("#test1").val(),
						 "date2":$("#test2").val(),
						 "huiyuanzh":$("#hymc-huiyuanzhanghao").val(),
						 "state":$("#qblx-quanbuleixing").val()
					},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
					type : 'post',
					dataType : 'json',
					async : false,
					success : function(result) { 
						 var newData = result.aaData
		        		for (var i = 0; i < newData.length; i++) {
		        			var item = newData[i]
		        			if (item.state === 1) {
		        				item.states = "待开奖"
		        			}
		        			else if(item.state === 7) {
		        				item.states = "已撤单"
		        			}else if(item.state === 8){
		        				item.states = "平台退款"
		        			}
		        			else if(item.state === 6) {
		        				item.states = "和局中奖"
		        			}
		        			else if(item.state === 2 || item.goalmoney === 0.00) {
		        				item.states = "未中奖"
		        			}
		        			else if(item.state === 3 || item.goalmoney !== 0.00) {
		        				item.states = "已中奖"
		        			}
		        		}
						result.aaData = newData;
						fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
					},
					error : function(msg) {
					}
				});
			}
		 }	
			
			/* 查看详情 */
			$("#table_id_example").on("click",'.butt-xiangqing',function(e){
				$("#addAndEditModal").modal("show")
				var id = $(e.currentTarget).closest("tr").find(".id-td-edit").text()
				ajax({
					type: "post",
					url: "/czgl/findByIdUsesrBettingRecord.do",
					"data":{'id':id	},
					success:function(data){
					    var data = JSON.parse(data)
						var newData=data.data;
					    console.log(newData)
						var body = $(".modal-body")
						body.empty()
						var awardNumber  = newData["lotternum"]
						if(awardNumber  == null || awardNumber  == "" ){
							awardNumber   = "待开奖"
						}
						body.append("<p><span class='backbet'>投注期号：</span><input value='"+newData["period"]+"'class='form-control backCor' id='input-i-name' readonly /></p><p><span class='backbet'>开奖号码：</span><input value='"+awardNumber+"' class='form-control backCor' id='input-i-nicheng' readonly /></p>") 
						for(i=1;i<41;i++){
							if(newData["str"+i]!='' && newData["str"+i]!=null){
								body.append("<p><span>投注玩法：</span><input value='"+newData["cplay"+i]+"' class='form-control' id='input-i-name' readonly /></p><p><span>投注号码：</span><input value='"+newData["str"+i]+"' class='form-control' id='input-i-nicheng' readonly /></p>")
							}
						} 
					}
				});
			}) 
		    dataTable01();
		   /*  insertSearchBtn() */
		   
		   /* 真分页跳转到指定页 */
		 /*   truePageSearchBtn() */
		   
		   /* 删除 */
			$("#table_id_example").on("click", ".btn-c-delBankInfo", function(e) {
				var idValue = $(e.currentTarget).closest("tr").find(".id-td-edit").text()
				var newRequest = {
					type: "post",
					url: "/czgl/deleteBettingInfo.do",
					data: {
						id: idValue,
					},
					success: function(data) {
						var newData = JSON.parse(data)
						if (newData.data !== 1) {
							showNoticeModal("删除失败！")
							return
						}
						showNoticeModal("成功删除" + newData.data + "条数据！")
						var table = $("#table_id_example").DataTable()
						table.ajax.reload()		
					},
					error: function(status) {
					}
				}
				ajax(newRequest)					
			})
		  
		    /* 页数跳转 */
			$(".class-span-searchBtnTwo").click(function(){
				
			});
		   
		 /*   function  */
			
		    /* 重置 */
			$("#button-i-resetTableContent").on("click", function(event) {
				$('#test1').val("");
				$('#test2').val("");
				$('#hymc-touzhuqihao').val("");
				$('#hymc-huiyuanzhanghao').val("");
				$('#qblx-quanbuleixing').val("");
				$('#qblx-quanbucaizhong').val("");
				dataTable01();
			})
			
			
			/* 查询 */
			$("#button-i-searchTableContent").on("click", function(event) {
				dataTable01();
			})
			
	</script>
</body>
</html>